<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>阿呜智慧柜</title>
    <style>
        body {
            font-size: 16px;
        }

        .MyGradientClass {
            background: no-repeat;
            background-image: -webkit-linear-gradient(top, #f1c232, #FFFFFF);
        }

        .topImg {
            position: relative;
            background: url("../images/boder.png");
            background-size: 100% 100%;
            padding: 10px;
            margin-bottom: 15px;
            z-index: 10;
        }

        p {
            font-size: 16px
        }

        .round {
            padding: 5px;
            width: 160px;
            height: 25px;
            background-color: #ff6666;
            font-size: 12px;
            color: white;
            -moz-border-radius: 15px;
            /* Gecko browsers */
            -webkit-border-radius: 15px;
            /* Webkit browsers */
            border-radius: 15px;
            /* W3C syntax */
        }
    </style>
    <script type="text/javascript">
        function pay() {
            $.ajax({
                type: "POST",
                url: "depositCell",
                data: {cabinetId:1,cellNo:$("#cellNo").val(), time:$("#time").val(), duration:$("#duration").val(), goodName:$("#goodName").val(), goodType:$("#goodType").val(), getPhone:$("#getPhone").val()},
                dataType: "json",
                success: function(data){
                    if(data.sucess){
                        $('#myModal').modal('show')
                    }else {
                        alert(data.msg);
                    }
                }
            });

        }
    </script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body class="MyGradientClass">
<p style="font-weight: bold;font-size:20px">阿呜智慧储物柜
    <img class="topImg" />
<div class="panel panel-default">
    <p style="font-weight: bold;">俊发城郁金苑地下共享储物柜01
    <div class="panel-body">
        <div class="row">
            <div class="col-xs-5">
                剩余10个空位
            </div>
            <div class="col-xs-7">
                <font style="color: #cc4125;">促销期间，每天低至0.5元</font>
            </div>
        </div>
        <form class="form-inline" role="form">
            <hr />
            <div class="row">
                <div class="col-xs-6">
                    <b>*选择存放柜子:</b>
                </div>
                <div class="col-xs-6">
                    <select class="selectpicker form-control" data-style="btn-primary" id="cellNo">
                        <#list validCells as validCells>
                            <option value="${validCells.cellNo}" class="special">${validCells.cellNo}</option>
                        </#list>

                    </select>
                </div>
            </div>

            <br>
            <div class="row">
                <div class="col-xs-6">
                    <b>*选择存放时长:</b>
                </div>
                <div class="col-xs-6">
                    <!-- Small button group -->
                    <div class="btn-group">
                        <div class="row">
                            <div class="col-xs-5">
                                <input type="text" class="form-control" id="time" maxlength="2"
                                       style="width: 95%;">
                            </div>

                            <div class="col-xs-7">
                                <select class="selectpicker form-control" data-style="btn-primary" id="duration">
                                    <option value="0" class="special">天</option>
                                    <option value="0" class="special">周</option>
                                    <option value="0" class="special">月</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="round">存放一周9折，一个月8折！</div>
    </div>

    <div class="panel panel-default">
        <p style="font-weight: bold;">填写商品信息</p>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-5"><b>*商品名称:</b></div>
                <div class="col-xs-7"><input type="text" class="form-control" id="goodName" placeholder="商品名称">
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-xs-5"><b>*商品类型:</b></div>
                <div class="col-xs-7">
                    <select class="selectpicker form-control" data-style="btn-primary" id="goodType">
                        <option value="1" class="special">汽车用品</option>
                        <option value="2" class="special">数码用品</option>
                        <option value="3" class="special">生活用品</option>
                        <option value="4" class="special">精美礼品</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-5"><b>*取货手机号:</b></div>
                <div class="col-xs-7"><input type="text" class="form-control" id="getPhone"
                                             placeholder="接收开柜码手机号码"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-8" style="text-align: left;">
            <font style="font-size:15px;color: #cc4125;">禁止放置违禁物品！</font>
        </div>
        <div class="col-xs-4" style="text-align: right;">
            <font style="font-size:15px;color: #cc4125;">查看详情></font>
        </div>
    </div>
    </form>
    <br />
    <div style="text-align: right;"><button type="button" class="btn btn-danger" onclick="pay()">立即付款</button>
    </div>

    <!-- 存放成功弹出框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">存放成功</h4>
                </div>
                <div class="modal-body">
                    存放成功，您可以将物品发布到阿呜二手市场供交易，您需要发布吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous">
    </script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous">
    </script>
</body>
</html>
